<template>
  <div class="outer-container">
    <template v-if="!isEmpty(basicInfo)">
      <div class="top-container" v-if="!loading">
        <BasicInfo style="flex: 1" tag="mcht_infom" :id="route.params.id"></BasicInfo>
        <div style="width: 40%;flex-direction: column;display: flex; gap:10px">
          <div style="width: 100%;display: flex; gap: 20px; flex-direction: column;">
            <dv-border-box12>
              <div style="display: flex;gap:10px; padding: 20px;">
                <div style="width: 30%;">
                  <dv-decoration-9 style="width:150px;height:150px;margin: 0 auto;">
                    <div class="tech-text" style="font-size: 48px; font-family: 'LCD', sans-serif; color: white;">{{
                      overallScore }}
                    </div>
                  </dv-decoration-9>
                  <div style="">
                    <h2 style="text-align: center; color: white;">综合风险指数</h2>
                  </div>
                </div>
                <Radar :data="data" style="width: 40%;"></Radar>
                <div style="width: 30%;">
                  <Gauge :data="overallScore / 100"></Gauge>
                </div>
              </div>
            </dv-border-box12>
            <LabelBox :labels="Object.values(metaStore.mchtLabels).flatMap(l => l)"></LabelBox>
          </div>
        </div>
      </div>
      <div class="bottom-container">
        <MchtScenarioBox title="黄牛营销" :highlights="['fraud_total', 'fraud_at']" scenario="abnorm_hn_mchnt"
          scoreKey="fraud_cnt_rate" :id="route.params.id"
          :labels="['trans_blk_ip_disc_abnl', 'trans_blk_phone_seg_disc_abnl', 'trans_blk10_disc_abnl', 'trans_blk_bin_disc_abnl', 'trans_blk_yuan_disc_abnl', 'fraud_tgrp_disc_abnl', 'fraud_grp_disc_abnl', 'null_gps_disc_abnl', 'diff_gps_prov_disc_abnl', 'diff_gps_city_disc_abnl', 'diff_ip_disc_abnl', 'diff_phone_disc_abnl']">
        </MchtScenarioBox>
        <MchtScenarioBox title="团伙套现" :highlights="['trans_cnt_mon', 'trans_sum_mon']" scenario="mcht_taoxian_label"
          scoreKey="taoxian_score" :id="route.params.id" :labels="taoxianLabels">
        </MchtScenarioBox>
        <MchtScenarioBox title="商户违规"
          :highlights="['case_num_mchnt_label', 'froz_num_mchnt_label', 'ill_num_mchnt_label']" scenario="mchnt_label"
          scoreKey="score" :id="route.params.id" :labels="weiguiLabels">
        </MchtScenarioBox>
      </div>
    </template>
    <div v-else>
      <el-empty description="该商户近期无风险" />
    </div>
  </div>
</template>

<script lang="js" setup>
import { reactive, ref } from 'vue'
import BasicInfo from '@/components/BasicInfo.vue'
import Radar from '@/components/Radar.vue'
import LabelBox from '@/components/LabelBox.vue'
import { useRoute } from 'vue-router'
import { useSchemaStore } from '@/stores/schema'
import MchtScenarioBox from '@/components/MchtScenarioBox.vue'
import { useMetaStore } from '@/stores/meta'
import { useScoreStore } from '@/stores/score'
import { isEmpty, max, mean, min } from 'lodash'
import Gauge from '@/components/Gauge.vue'
import { nebulaExec } from '@/utils/request'

const taoxianLabels = [
  'start_with_4at_cnt_big',
  'credit_trans_usr_cnt_big',
  'graph_trans_cnt_big',
  'active_day_cnt_big',
  'credit_trans_cnt_big',
  'graph_trans_at_big',
  'total_trans_at_big',
  'labelA_usr_cnt_big',
  'graph_edge_outlier_score_big',
  'start_with_7at_cnt_big',
  'start_with_9at_cnt_big',
  'hourly_trans_cnt_max_big',
  'in_7d_suc_shop_cnt_big',
  'hourly_trans_at_big',
  'in_7d_suc_shop_at_big',
  'in_1d_suc_at_big',
  'hourly_trans_cnt_big',
  'in_14d_suc_at_25th_mid',
  'start_with_9at_cnt_rate_diff_mid',
  'start_with_8at_cnt_big',
  'start_with_4at_cnt_rate_diff_big',
  'hundred_trans_usr_cnt_big',
  'hourly_trans_at_avg_big',
  'freq_credit_trans_time_diff_avg_mid',
  'in_7d_suc_shop_at_avg_big',
  'remote_credit_trans_cnt_rate_mid',
  'in_1d_suc_at_avg_big',
  'credit_trans_at_avg_big'
];

const weiguiLabels = [
  'city_trans_same_mchnt_label',
  'prov_trans_same_mchnt_label',
  'cross_city_trans_mchnt_label',
  'cross_prov_trans_mchnt_label',
  'term_active_num_large_mchnt_label',
  'trans_continuous_mchnt_label',
  'cancel_num_increase_mchnt_label',
  'cancel_at_increase_mchnt_label',
  'credit_trans_num_increase_mchnt_label',
  'qp_num_increase_mchnt_label',
  'qp_at_increase_mchnt_label',
  'qr_num_increase_mchnt_label',
  'qr_at_increase_mchnt_label'
];

const route = useRoute()
const metaStore = useMetaStore()
const scoreStore = useScoreStore()

const loading = ref(true)

const overallScore = ref(0)
const data = ref([])

function weightedScore(arr) {
  const max = Math.max(...arr);
  const hasAbove60 = arr.some(num => num > 60);

  const sum = arr.reduce((acc, num) => acc + num, 0);

  // 根据sum调整加权分数的计算逻辑，sum越大分数越高
  let result;
  if (hasAbove60) {
    const factor = sum / (arr.length * 100);
    result = max + (100 - max) * factor;
  } else {
    const factor = sum / (arr.length * 60);
    result = max + (60 - max) * factor;
  }

  return result;
}

scoreStore.$subscribe((mutation, state) => {
  console.log(state.mchtScores)
  data.value = Object.entries(state.mchtScores).map(([k, v]) => {
    return {
      name: k,
      // star: v.length ? mean(v) * 100 : 0
      star: min([max(v) * 100 || 0, 100])
    }
  })
  // console.log(data.value)
  // data.value = [{ name: '1', star: 20 }, { name: '111', star: 20 }, { name: '11', star: 20 }]
  // overallScore.value = Math.floor(mean(Object.values(state.mchtScores).map(v => mean(v))) * 100)
  // overallScore.value = Math.floor(weightedScore(Object.values(state.mchtScores).flatMap(v => (v)).map(v => v * 100)))
  // overallScore.value = Math.floor(weightedScore(Object.values(state.mchtScores).map(v => mean(v)).filter(v => !Number.isNaN(v)).map(v => v * 100)))
  overallScore.value = Math.floor(max(data.value.map(v => v.star)))
})

const basicInfo = ref({})

async function fetchData() {
  await useSchemaStore().load()
  const resp = await nebulaExec(`MATCH (v:mcht_infom) where id(v) == "${route.params.id}" return id(v)`)
  console.log(resp)
  basicInfo.value = resp
  loading.value = false
}

fetchData()
</script>

<style scoped>
.outer-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 20px 20px 20px;
  height: 100%;
}

.top-container {
  flex: 0 1 400px;
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.bottom-container {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100%;
  /* margin-bottom: 80px; */
}

.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}

.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}
</style>
